<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/6/5
  Time: 10:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.8.2/layui/css/layui.css" >
</head>
<body>


<%-- 修改的表单--%>
<form class="layui-form" id="myform" action="" style="display: none" lay-filter="myform">

    <input type="hidden" name="id" >

    <div class="layui-form-item">
        <label class="layui-form-label">用户名字</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">重复密码</label>
        <div class="layui-input-block">
            <input type="password" id="pwd" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证手机号</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="tel" name="tel" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
            </div>

        </div>
    </div>

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="text" name="birthday" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked>
            <input type="radio" name="sex" value="女" title="女">
            <input type="radio" name="sex" value="禁" title="禁用" disabled>
        </div>
    </div>

    <%--     头像--%>
    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
        <i class="layui-icon layui-icon-upload"></i> 单图片上传
    </button>
    <div style="width: 132px;">
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
            <div id="ID-upload-demo-text"></div>
        </div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>

    <input type="hidden" name="imgpath" id="img" />




    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<%-- 查询框   名字  性别--%>
<form class="layui-form layui-form-pane" action="">
    <div class="layui-inline">
        <label class="layui-form-label">名字</label>
        <div class="layui-input-inline">
            <input type="text" name="username" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-inline">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">

            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
    </div>

    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="demo2">查询</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>

</form>

<table class="layui-hide" id="ID-table-demo-data"></table>


<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="${pageContext.request.contextPath}/static/layui-v2.8.2/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
        var upload = layui.upload;
        var element = layui.element;
        var $ = layui.$;




        var dropdown = layui.dropdown;



        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            //  图片  上传到指定的位置
            url: '${pageContext.request.contextPath}/upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                console.log(res);
                //  code  msg  path
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // path  imgpath
                $("#img").val(res.data);
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        // 自定义验证规则
        form.verify({
            pass: function(value){
                //
                var rpwd = $("#pwd").val();
                if(value!=rpwd){
                    return "两次密码不一致";
                }

            }
        });


        // 提交事件
        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            $.ajax({
                type:"PUT",// put请求  修改
                "data":field,
                url:"${pageContext.request.contextPath}/yzhUser",
                success:function (res){
                   // console.log(res);
                    // 刷新


                    if(res.code==0){
                        //  刷新table
                        table.reload('ID-table-demo-data',{
                            page: {
                                curr: 1 // 重新从第 1 页开始
                            }
                        });
                    }



                }
            })
            layer.close();

            return false; // 阻止默认 form 跳转
        });


        var maxdate= getDate();
        // 日期
        laydate.render({
            elem: '#date',
            // 最大值是当天的值
            value: maxdate,
            max: maxdate,
        });



        // 创建渲染实例
        table.render({

                    elem: '#ID-table-demo-data',
                    url:"${pageContext.request.contextPath}/yzhUser",
                    // data  【{}】
                    //skin: 'line', // 表格风格
                    //even: true,
                    page: true, // 是否显示分页
                    limits: [1, 2, 3],
                    limit: 1 ,// 每页默认显示的数量,
                    cols: [[ //标题栏
                        {field: 'id', title: 'ID', sort: true},
                        {field: 'username', title: '用户'},
                        {field: 'password' , title: '密码'},
                        {field: 'sex', title: '性别'},
                        {field: 'tel', title: '城市'},
                        {field: 'birthday', title: '生日'},
                        {field: 'imgpath', title: '头像',templet:function(d){
                            //
                                if(d.imgpath==""||d.imgpath==null){
                                    return "";
                                }else{
                                    return "<img src='"+d.imgpath+"' width='50px' height='50px'></img>";
                                }

                            }},
                        {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
        ]],
            done: function(){
                var id = this.id;
                // 下拉按钮测试
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'update',
                        title: '编辑'
                    },{
                        id: 'delete',
                        title: '删除'
                    }],
                    // 菜单被点击的事件
                    click: function(obj){
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch(obj.id){

                            case 'update':
                               // if(data.length !== 1) return layer.msg('请选择一行');
                                layer.open({
                                    title: '编辑',
                                    type: 1,
                                    top:'100px',
                                    area: ['80%','80%'],
                                    content: $("#myform")
                                });
                                break;
                            case 'delete':
                                if(data.length === 0){
                                    return layer.msg('请选择一行');
                                }
                                layer.msg('delete event');
                                break;
                        }
                    }
                });

            },
            error: function(res, msg){
                console.log(res, msg)
            }
        });


        // 触发单元格工具事件
        table.on('tool(ID-table-demo-data)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'edit'){
                layer.open({
                    title: '编辑 - id:'+ data.id,
                    type: 1,
                    offset:"50px",
                    area: ['80%','80%'],
                    content: $("#myform")
                });

                //form.val(filter, obj);
                form.val("myform",data);
                console.log(data.imgpath);
                //
                $('#ID-upload-demo-img').attr('src', data.imgpath); // 图片链接（base64）
                //
                alert( $('#ID-upload-demo-img').attr('src'));
            } else if(obj.event === 'more'){
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看',
                        id: 'detail'
                    },{
                        title: '删除',
                        id: 'del'
                    }],
                    click: function(menudata){
                        if(menudata.id === 'detail'){
                            layer.msg('查看操作，当前行 ID:'+ data.id);
                        } else if(menudata.id === 'del'){
                            layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                               // obj.del(); // 删除对应行（tr）的DOM结构
                                // 删除
                                // 调用ajax  删除
                                $.ajax({
                                    type:"DELETE",
                                    //data:"",
                                    url:"${pageContext.request.contextPath}/yzhUser/"+data.id,
                                    success:function(res){
                                        //  刷新table
                                        table.reload('ID-table-demo-data',{
                                            page: {
                                                curr: 1 // 重新从第 1 页开始
                                            }
                                        });
                                    }
                                })


                                layer.close(index);
                                // 向服务端发送删除指令
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });


            form.on('submit(demo2)', function(data){
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                // layer.alert(JSON.stringify(field), {
                //     title: '当前填写的字段值'
                // });
                // 查询的条件   table
                table.reload('ID-table-demo-data', {
                    where:field
                });
                // 此处可执行 Ajax 等操作
                // …
                return false; // 阻止默认 form 跳转
            });

    });


    function getDate(){
        var date = new Date();//
        var year=date.getFullYear()-18;// 2005-06-05
        var mon=date.getMonth()+1;//1-12
        if(mon<10){
            mon="0"+mon;
        }

        var da=date.getDate();
        if(da<10){
            da="0"+da;
        }
        var newdate=year+"-"+mon+"-"+da;
        return newdate;
    }
</script>
</body>
</html>
